<template>
  <el-row>
    <el-col :span="24">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>支付管理</el-breadcrumb-item>
        <el-breadcrumb-item>支付列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24">
      <el-table :data="payList" border stripe  style="width: 75%">
        <el-table-column prop="id" label="编号" width="100" />
        <el-table-column prop="user.username" label="用户名" width="180" />
        <el-table-column prop="orderNo" label="订单号" width="200"  />
        <el-table-column prop="platformNumber" label="支付流水" width="280"  />
        <el-table-column  label="支付平台" width="120" >
          <template #default="scope">
            <el-tag v-if="scope.row.payPlatform == 0" class="mx-1" effect="dark" round> 微信 </el-tag>
            <el-tag v-if="scope.row.payPlatform == 1" class="mx-1" effect="light" round>支付宝</el-tag>
          </template>
        </el-table-column>
        <el-table-column  label="支付状态" width="120" >
          <template #default="scope">
            <el-tag v-if="scope.row.platformStatus == 'WAIT_BUYER_PAY'" class="mx-1" effect="dark" round> 等待支付 </el-tag>
            <el-tag v-if="scope.row.platformStatus == 'TRADE_SUCCESS'" class="mx-1" effect="light" round>支付成功</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"  />
        <el-table-column prop="updateTime" label="更新时间"  />
      </el-table>
    </el-col>
  </el-row>
</template>
<script>
import {getCurrentInstance,onMounted} from "vue";
import {getAllPayInfo} from '../../api/pay.js'

export default {
  name: 'PayList'
  ,data(){
    return {
      payList:[

      ]
    }
  }
  ,methods:{
    async loadPayInfo(){
      const {data:ret} = await getAllPayInfo();
      console.log(ret)
      this.payList = ret['data']
    }
  }
  ,setup(){
    const {ctx:ctx} = getCurrentInstance();
    onMounted(()=>{
      ctx.loadPayInfo()
    })
  }
}
</script>

<style scoped>

</style>